import React, { Component } from 'react'
import {Form,Button,Input,Modal} from "antd"
import {connect} from "react-redux"
import propTypes from "prop-types"
import {bindActionCreators} from "redux"
import * as action from "../action/tableIndex"
// 封装公共组件 ，这个组件既可以做删除，也可以做编辑
class Addeditmodel extends Component {
  static defaultProps = { // 如果没传，走进这个对象
    title:"22222" ,// 如果父组件没有传title这个属性，则this。pros。titel得值为22222，如果传了为父组件传递得值
  }
  static propTypes = { // 对传入得参数类型做校验
    // 语法：propTypes.js数据类型
    title:propTypes.string // this.props.title 得类型是字符串类型
}
 handleCancel(){ //弹窗取消的方法
    this.props.sonshow(false)  //执行这个方法要修改父组件里给这个组件传过来控制弹窗显示隐藏的变量
 }
 componentWillReceiveProps(nextProps){ // 当父组件传递给子组件的数据发生改变时执行这个生命周期
    console.log(nextProps)
    if (nextProps.title == "新增") {
        this.myref.resetFields()
    } else {
        this.myref && this.myref.setFieldsValue({...nextProps.edititem})
    }
 }
 onFinish(value) { // 表单提交成功的事件
    if (this.props.title == "新增") {
      console.log(value)
      this.props.addfn(value) // 调用仓库的方法
      this.props.sonshow(false) // 修改true false 关闭弹窗
    } else {
       this.props.editFn(Object.assign({},value,{editIndex:this.props.editindex}))
       this.props.sonshow(false) 
    }
  }
  render() {
    return (
      <div>
            <Modal forceRender title={this.props.title} visible={this.props.isModalVisible} onCancel={this.handleCancel.bind(this)} footer={null}>
          <Form
            name="basic"
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
            onFinish={this.onFinish.bind(this)}
            ref={(ref) => this.myref = ref}
            autoComplete="off"
          >
            <Form.Item
              label="姓名"
              name="name1"
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="地址"
              name="address"
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="日期"
              name="date"
            >
              <Input />
            </Form.Item>
            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Button type="primary" htmlType="submit">
                Submit
              </Button>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    )
  }
}
let mapStateToprops = (state) => {
    return {
      ...state.tablereducer
    }
  }
let mapDsipatchToProps = (dispatch) => bindActionCreators(action, dispatch)
export default connect(mapStateToprops, mapDsipatchToProps)(Addeditmodel)
